<template>
	<div class="chartsWrap">
    	<div class="headline">			  	    	 	 
    	 	 <span class="title">
	    	 	 	<i class="el-icon-s-marketing"></i>	    	 	 	
	    	 	 	3D柱状图	 	 	
    	 	 </span>			  	    	 	 
    	</div>  		
		<e-chart :options="option"  class="charts"></e-chart>
	</div>
</template>

<script>
	export default {
		data() {
			const data = [220, 182, 191, 234, 290, 330, 310]
			const sideData = data.map(item => item + 4.5)
			return {
				option: {
					// backgroundColor: "#041730",
					tooltip: {
						trigger: 'axis',
						formatter: "{b} : {c}",
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					xAxis: {
						data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
						//坐标轴
						axisLine: {
							lineStyle: {
								color: '#666'
							}
						},
						//坐标值标注
						axisLabel: {
							show: true,
							textStyle: {
								color: '#fff',
							}
						}
					},
					yAxis: {
						//坐标轴
						axisLine: {
							show: true,
							lineStyle: {
								color: '#666'
							}							
						},
						//坐标值标注
						axisLabel: {
							show: true,
							textStyle: {
								color: '#fff',
							}
						},
						//分格线
						splitLine: {
							lineStyle: {
								color: '#666'
							}
						}
					},
					series: [{
						name: 'a',
						tooltip: {
							show: false
						},
						type: 'bar',
						barWidth: 24.5,
						itemStyle: {
							normal: {
								color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
									offset: 0,
									color: "#0B4EC3" // 0% 处的颜色
								}, {
									offset: 0.6,
									color: "#138CEB" // 60% 处的颜色
								}, {
									offset: 1,
									color: "#17AAFE" // 100% 处的颜色
								}], false)
							}
						},
						data: data,
						barGap: 0
					}, {
						type: 'bar',
						barWidth: 8,
						itemStyle: {
							normal: {
								color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
									offset: 0,
									color: "#09337C" // 0% 处的颜色
								}, {
									offset: 0.6,
									color: "#0761C0" // 60% 处的颜色
								}, {
									offset: 1,
									color: "#0575DE" // 100% 处的颜色
								}], false)
							}
						},
						barGap: 0,
						data: sideData
					}, {
						name: 'b',
						tooltip: {
							show: false
						},
						type: 'pictorialBar',
						itemStyle: {
							borderWidth: 1,
							borderColor: '#0571D5',
							color: '#1779E0'
						},
						symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
						symbolSize: ['30', '12'],
						symbolOffset: ['0', '-11'],
						//symbolRotate: -5,
						symbolPosition: 'end',
						data: data,
						z: 3
					}]
				}
			}
		},
		created() {

		},
		beforeDestroy() {

		},
		mounted() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped="">
	.chartsWrap {
		height: 100%;display: flex;flex-direction: column;
		.charts{flex: 1;}
		.headline{
				display: flex;
				color: #fff;		
				.title{
			      background: #131420;
			      padding: 8px 15px;
			      display: inline-block;
			      font-size: 14px;
				    box-shadow: inset 0 0 10px 0 rgba(53,145,255,.8);
				    border: 1px solid #3591ff80;          
				}
		}		
	}
</style>